
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/qudaoshouzhi" style="color: #409eff;">渠道收支</router-link></div>
          <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <router-link class="powertopli powertopact" to="/qudaoshouzhi">渠道收支</router-link>
        	</div>
        </div>
        <div class="qdtop">
          <div class="flex" style="justify-content: space-between;">
            <div class="flex">
              <div style="line-height: 36px;">销售渠道</div>
              <div><el-input v-model="input" placeholder="请输入内容"></el-input></div>
              <div><el-button type="danger" @click="search">搜索</el-button></div>
              <div><el-button style="padding: 9px 10px;" @click="gotuiguang">录入渠道支出数据</el-button></div>
            </div>
            <div class="flex" style="justify-content: right;">
              <div class="month" @click="month(0)">当前月</div>
              <div class="month" @click="month(1)">上一月</div>
              <div class="month" @click="month(2)">下一月</div>
              <el-date-picker v-model="time" type="month" value-format="yyyy-MM" @change="search()" placeholder="选择月"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="qdcenter" v-loading="loading">
          <div class="qdtitle">电商平台收支情况</div>
          <div class="qdlist">
            <div class="list listth flex">
                <div class="th">销售渠道</div>
                <div class="th">发货数量</div>
                <div class="th">佣金发放率</div>
                <div class="th">预估佣金收入</div>
                <div class="th">实际佣金收入</div>
<!--                <div class="th">销售收入</div>-->
                <div class="th">提卡费支出</div>
                <div class="th">推广支出</div>
                <div class="th">物流支出</div>
                <div class="th">利润</div>
                <div class="th">操作</div>
            </div>
            <div class="list listtd flex" v-for="item in list" :key="item.id">
                <div class="td">{{item.shop_name}}</div>
                <div class="td">{{item.delived_amount}}</div>
                <div class="td">{{item.commission_rate}}</div>
                <div class="td">{{item.predict_income}}</div>
                <div class="td">{{item.commission_income}}</div>
<!--                <div class="td">暂无</div>-->
                <div class="td">{{item.tika_expend}}</div>
                <div class="td">{{item.propagate_expend}}</div>
                <div class="td">{{item.track_expend}}</div>
                <div class="td">{{item.income}}</div>
                <div class="td"><el-button size="mini" type="text" @click="go(item.store_id,item.name)">店铺财务数据明细</el-button></div>
            </div>
          </div>
        </div>
          <div class="qdcenter">
              <div class="qdtitle">分销渠道收支情况</div>
              <div class="qdlist">
                <div class="list listth flex">
                    <div class="th">发货数量</div>
                    <div class="th">佣金发放率</div>
                    <div class="th">实际佣金收入</div>
                    <div class="th">提卡费收入</div>
                    <div class="th">提卡费支出</div>
                    <div class="th">佣金支出</div>
<!--                    <div class="th">物流支出</div>-->
                    <div class="th">利润</div>
                    <div class="th">操作</div>
                </div>
                <div class="list listtd flex">
                    <div class="td">{{list2.deliver_amount}}</div>
                    <div class="td">{{list2.commission_rate}}</div>
                    <div class="td">{{list2.merchant_commission_income}}</div>

                    <div class="td">{{list2.merchant_tika_income}}</div>
                    <div class="td">{{list2.merchant_tika_expend}}</div>
                    <div class="td">{{list2.merchant_commission_expend}}</div>
<!--                    <div class="td">暂无</div>-->
                    <div class="td">{{list2.merchant_income}}</div>
                    <div class="td"><el-button size="mini" type="text" @click="go2()">渠道财务数据明细</el-button></div>
                </div>

              </div>
          </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'qudaoshouzhi',
    data() {
      return {
        input:"",
        time:'',
        list:"",
        list2:"",
        page:1,
        pagesize:20,
        total:0,
        loading:true,
        timesearch:false
      }
    },
    created() {
      this.time = moment().format("YYYY-MM");
      this.loading = true
      this.getlist()
    },
    methods:{
      month:function(id){
        if(id == 0){
          this.time = moment().format("YYYY-MM");
        }
        if(id == 1){
          if(this.timesearch == true){
            this.time = moment().subtract(1, 'months').format("YYYY-MM");
          }else{
            this.time = moment(this.time).subtract(1, 'months').format("YYYY-MM");
          }
        }
        if(id == 2){
          if(this.timesearch == true){
            this.time = moment().add(1, 'months').format("YYYY-MM");
          }else{
            this.time = moment(this.time).add(1, 'months').format("YYYY-MM");
          }
        }
        this.timesearch = false
        this.loading = true
        this.getlist();
      },
      gotuiguang:function(){
        this.$router.push({
          path:'/tuiguang'
        })
      },
      timechange:function(){
          this.start = this.time[0]
          this.end = this.time[1]
      },
      search:function(){
        this.getlist()
      },
      //翻页
      fanye:function(page){
      	this.loading = true
      	this.page = page
      	this.getlist()
      },
      //获取列表
      getlist:function(){
          var that = this
          axios.get('/api/plan-market/source/profit?date='+this.time+'&name='+this.input)
          	.then(response => {
          		if(response.data.msg.code == 0){
                that.list = response.data.data.list
                that.list2 = response.data.data.merchant
                that.loading = false
          		}else{
          			that.$message.error(response.data.msg.info);
          		}
          	})
      },
      go:function(id,shop) {
        this.$router.push({
          path:"/dianpuqushi",
          query:{'id':id,'shop':shop}
        })
      },
      go2:function() {
        this.$router.push({
          path:"/qudaoqushi"
        })
      }


    }
  }
</script>

<style lang="scss" scoped>
  .index{
		
			.team{ background: #F9F9F9; }
			.powertop{ display: flex; width: 640px; }
			.powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
			.powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
      .qdtop{padding: 20px 20px;
        div{ margin-right: 10px;}
        .el-button--danger{ padding: 9px 10px !important;}
        .month{ line-height:34px; position: relative; height: 34px; top:1px; border:1px #EAEAEA solid; font-size: 14px; padding: 0 6px; cursor:pointer; border-radius: 5px;}
        .mact{ background: #EEF7FF; color:#FFFFFF;}
      }
      .qdcenter{ margin-top: 40px;
        .qdtitle{ padding:0 0 20px 20px; font-size: 16px;}
        .list{ text-align: center; line-height: 50px;
          .th{ flex: 1; background: #EAEAEA; font-weight: bold;}
          .td{ flex: 1; border-bottom: 1px #EAEAEA solid; height: 50px; overflow: hidden; font-size: 14px;}
        }
      }
      .flex{ display: flex;}
		
	}
</style>
